<template>
  <div class="userList">
    <div style="margin-bottom: 10px;">
      <el-text style="font-size: larger; font-weight: bolder;">
        {{ util.language('员工管理', 'Staff Management') }}
      </el-text>
    </div>
    <el-form :inline="true">
      <el-form-item :label="util.language('电话号', 'Phone')">
        <el-input style="width: 140px;" :placeholder="util.language('请输入完整电话', 'Complete phone number')" v-model="searchParam.phone" clearable />
      </el-form-item>
      <el-form-item>
        <el-button-group>
          <el-button type="primary" @click="commitFindList()" :loading="loading.find">{{ util.language('搜索', 'Search') }}</el-button>
          <el-button @click="resetSearchParam()">{{ util.language('重置', 'Reset') }}</el-button>
        </el-button-group>
      </el-form-item>
      <el-form-item>
        <el-button-group>
          <el-button type="primary" @click="add()">{{ util.language('新增', 'New') }}</el-button>
          <el-button type="warning" :disabled="show.selected.length != 1" @click="update()">{{ util.language('详情', 'Detail') }}</el-button>
          <el-button type="danger" :disabled="show.selected.length != 1 || !show.selected[0].hasUsing" @click="setUsing(false)">{{ util.language('停用', 'Disable') }}</el-button>
          <el-button type="success" :disabled="show.selected.length != 1 || show.selected[0].hasUsing" @click="setUsing(true)">{{ util.language('启用', 'Enable') }}</el-button>
          <el-button type="info" :disabled="show.selected.length != 1" @click="show.resetPasswordShow = true">{{ util.language('重置密码', 'Reset password') }}</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
    <el-table :data="data.userList" @selection-change="selectionChange()" ref="tabRef" border style="height: calc(100vh - 220px);" v-loading="loading.find">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" width="70" align="center">
        <template #default="scope">
          <el-link type="primary" @click="update(scope.row)">{{ scope.row.id }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="code" :label="util.language('编号', 'Code')" show-overflow-tooltip width="120" />
      <el-table-column prop="nick" :label="util.language('称呼', 'Nick')" show-overflow-tooltip />
      <el-table-column prop="phone" :label="util.language('电话号', 'Phone')" width="200" />
      <el-table-column prop="admin" :label="util.language('特殊身份', 'Special identity')" width="180">
        <template #default="scope">
          <el-tag v-if="scope.row.admin">{{ util.language('超管', 'Super admin') }}</el-tag>
          <el-text v-else></el-text>
        </template>
      </el-table-column>
      <el-table-column prop="hasUsing" :label="util.language('状态', 'State')" width="100">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.hasUsing">{{ util.language('启用', 'Enable') }}</el-tag>
          <el-tag type="danger" v-if="!scope.row.hasUsing">{{ util.language('停用', 'Disable') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="roleName" :label="util.language('角色', 'Role')" width="200" show-overflow-tooltip />
      <el-table-column prop="createDatetime" :label="util.language('创建时间', 'Create time')" width="160">
        <template #default="scope">
          <el-text>{{ util.parseTime(scope.row.createDatetime) }}</el-text>
        </template>
      </el-table-column>
    </el-table>
    <div style="height: 10px;" />
    <el-pagination v-model:current-page="searchParam.pageNum" v-model:page-size="searchParam.pageSize" :page-sizes="[50, 100, 200]" background layout="total, sizes, prev, pager, next, jumper" :total="data.userTotal" @change="commitFindList()" />
  </div>

  <el-dialog v-model="show.resetPasswordShow" :title="util.language('重置密码', 'Reset password')" width="550" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form label-width="auto">
      <el-form-item :label="util.language('新密码', 'New password')">
        <el-input v-model="data.newPassword" type="password" style="width: 100%;" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="show.resetPasswordShow = false">{{ util.language('取消', 'Cancel') }}</el-button>
        <el-button type="primary" @click="resetPassword()" :loading="loading.resetPassword">{{ util.language('确认', 'OK') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '../../apis/api'
import cache from '../../utils/cache'
import util from '../../utils/util'

const router = useRouter()
const tabRef = ref()

const data = reactive({
  userTotal: 0,
  userList: [],
  menuList: [],
  newPassword: '',
})
const loading = reactive({
  find: false,
  resetPassword: false,
})
const show = reactive({
  resetPasswordShow: false,
  selected: [],
})

const searchParam = reactive({})
const resetSearchParam = () => {
  searchParam.pageNum = 1
  searchParam.pageSize = 50
  searchParam.phone = ''
  searchParam.using = null
  searchParam.roleId = null
}
resetSearchParam()

const commitFindList = () => {
  loading.find = true
  api.get('/backend/user/getPage', { params: searchParam }).then(res => {
    data.userList = res.list
    data.userTotal = res.total
  }).finally(() => {
    loading.find = false
  })
}
commitFindList()

const selectionChange = () => {
  show.selected = tabRef.value.getSelectionRows()
}

const add = () => {
  cache.setObject(cache.keys.pageParam + 'userDetail', null)
  router.push('/userDetail')
}

const update = (row) => {
  const user = row ? row : tabRef.value.getSelectionRows()[0]
  cache.setObject(cache.keys.pageParam + 'userDetail', user)
  router.push('/userDetail')
}

const setUsing = (hasUsing) => {
  const user = tabRef.value.getSelectionRows()[0]
  const messageName = hasUsing ? util.language('启用', 'enable') : util.language('停用', 'disable')
  ElMessageBox.confirm('', {
    title: util.language('确认', 'Confirm') + messageName,
    message: user.nick,
    autofocus: false,
    confirmButtonText: util.language('确认修改', 'OK'),
    cancelButtonText: util.language('取消', 'Cancel'),
  }).then(() => {
    api.post('/backend/user/setUsingById', { id: user.id, using: hasUsing }).then(() => {
      ElMessage.success(util.language('操作成功', 'Success'))
      commitFindList()
    })
  })
}

const resetPassword = () => {
  loading.resetPassword = true
  const user = tabRef.value.getSelectionRows()[0]
  api.post('/backend/user/resetPasswordById', {
    userId: user.id,
    newPassword: data.newPassword
  }).then(res => {
    ElMessage.success(util.language('重置密码成功', 'Reset password success'))
    show.resetPasswordShow = false
    data.oldPassword = ''
    data.newPassword = ''
  }).finally(() => {
    loading.resetPassword = false
  })
}

</script>

<style lang="less"></style>